<template>
    <div class="photoinfo">
        <h3 class="title">{{info.title}}</h3>
        <p class="info">
            <span>发表时间：{{info.add_time | dateFormat}}</span>
            <span>点击：{{info.click}}次</span>
        </p>
        <hr/>
        <vue-preview :slides="list" @close="handleClose"></vue-preview>
        <div class="content" v-html="info.content"></div>
        <comment-box :id="this.id"></comment-box>
    </div>
</template>

<script>
    import { Toast } from 'mint-ui'
    //导入评论子组件
    import comment from '../subcomponents/commemt.vue'
    export default {
        data(){
            return {
                id: this.$route.params.id,
                info:{},
                list:[],//缩略图数组
            }
        },
        created(){
            this.getPhotoInfo()
            this.getThumbImgs()
        },
        methods:{
            getPhotoInfo(){
                this.$http.get('api/getimageinfo/' + this.id).then(result => {
                    //console.log(result.body)
                    if(result.body.status == 0){
                        this.info = result.body.message[0]
                    }else{
                        Toast('获取图片详情失败')
                    }
                })
            },
            getThumbImgs(){
                this.$http.get('api/getthumimages/' + this.id).then(result => {
                    //console.log(result.body)
                    if(result.body.status == 0){
                        let arr = result.body.message
                        arr.forEach(item => {
                            item.w = 600;
                            item.h = 400;
                            item.msrc = item.src;
                        });
                        this.list = arr
                    }else{
                        Toast('获取图片缩略图失败')
                    }
                })
            },
            handleClose () {
                console.log('close event')
            }
        },
        //注册子组件
        components:{
            'comment-box':comment
        }
    }
</script>

<style lang="sass" scoped>
    figure{
        img{
            width:100px;
        }
    }
    .photoinfo{
        padding:0 5px;
        

        h3.title{
            padding:5px 0;
            text-align:center;
            font-size:15px;
            color:red;
        }

        p.info{
            font-size:13px;
            color:#999;
            display:flex;
            justify-content:space-between;
        }
        .content{
            img{
                width:100%;
            }
        }
    }
</style>
